<template>
  <div id="app">
    <header class="head">
      <a class="back tl" @click="clickmodl">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">进货记录</small>
      </a>
      <router-link to='/jhjllistadd' class="adds">
        <i class="el-icon-plus"></i>
      </router-link>
    </header>
    <main>
      <div class="seachfrom">
        <div class="seachbox">
          <el-input placeholder="请输入内容" v-model="seachtext">
            <el-button slot="append" icon="search" @click="seach()"></el-button>
          </el-input>
        </div>
      </div>
      <div>
        <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :auto-fill="false" ref="loadmore">
          <ul class="datalist">
            <li v-for='item of listData' :key='item.unid' :foodunid='item.demandWarehouse.demandType.unid' :foodname="item.demandWarehouse.name" :foodbrand="item.brand" :foodnorms="item.norms" @click="foodClick(item.demandWarehouse.demandType.unid,item.demandWarehouse.name,item.brand,item.norms)">
              <a>
                <div class="items-img">
                  <img src="../assets/iconimg.png" />
                </div>
                <div class="items-text">
                  <p>名称:{{item.demandWarehouse.name}}</p>
                  <p>出货数量{{item.shipments}}{{item.unit}}</p>
                  <p>规格/含量：{{item.norms}}</p>
                  <p>进货日期：{{item.stockDate|time}}</p>
                </div>
              </a>
            </li>
          </ul>
        </v-loadmore>
        <div class="none_data" v-show="nonedata">
          <img src="../img/tip.png">
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import {
    DemandCertificate
  } from '../api/api';
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    components: {
      'v-loadmore': Loadmore,
    },
    data() {
      return {
        PageSize: 5,
        CurrentPage: 1,
        CriteriaList: [],
        listData: [],
        seachtext: '',
        select: '',
        nonedata: false,
      };
    },
    methods: {
  
      foodClick: function(foodunid, foodname, foodbrand, foodnorms) {
        this.$emit("listenToChildEvent", {
          foodunid,
          foodname,
          foodbrand,
          foodnorms
        });
      },
      clickmodl: function() {
        this.$emit("listencloseclick");
      },
      loadTop: function() { //组件提供的下拉触发方法  
        //下拉刷新
        if (this.CurrentPage <= 0) {
          this.CurrentPage = 1;
        } else {
          this.listData = [];
          this.getData();
        }
        this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
      },
      loadBottom: function() {
        // 上拉加载  
        this.CurrentPage += 1;
        this.getData();
        // 上拉触发的分页查询  
        //this.allLoaded = true;
        this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
      },
      //搜索
      seach: function() {
        this.listData = [];
        this.CriteriaList[0] = {
          Name: 'DemandWarehouse.Name',
          Value: '%' + this.seachtext + '%',
          Operate: 'Like',
          DataType: null,
          EndSuffix: '',
          Suffix: null
        };
        this.CriteriaList[1] = {
          Name: 'Brand',
          Value: '%' + this.seachtext + '%',
          Operate: 'Like',
          DataType: null,
          EndSuffix: '',
          Suffix: null
        };
        this.CriteriaList[2] = {
          Name: 'Producers',
          Value: '%' + this.seachtext + '%',
          Operate: 'Like',
          DataType: null,
          EndSuffix: '',
          Suffix: null
        };
        this.CriteriaList[3] = {
          Name: 'Supplier.SupplierName',
          Value: '%' + this.seachtext + '%',
          Operate: 'Like',
          DataType: null,
          EndSuffix: '',
          Suffix: null
        };

        this.getData();
      },
      //数据加载方法
      getData() {
        //定义需要传给通讯的参数：QueryData{"PageSize":10,"CurrentPage":1,"Query":{"CriteriaList":[]}}和userunid    
        let varQueryData = {
          PageSize: this.PageSize,
          CurrentPage: this.CurrentPage,
          Query: {
            CriteriaList: [],
            SubQueryList: []
          }
        }
        if (this.CriteriaList.length !== 0) {
          let SubQueryList = [{
            CriteriaList: this.CriteriaList,
            Relation: 'or'
          }]
          varQueryData.Query.SubQueryList = SubQueryList;
        }
        let options = {
          params: {
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
            QueryData: JSON.stringify(varQueryData)
          }
        }
        //调取接口
        DemandCertificate(options).then((res) => {
          if (res.success === true) {
            this.listData = this.listData.concat(res.data);
            this.nonedata = false
          }
  
        })
      }
    },
    mounted() {
      this.getData();
    }
  
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  
</style>
